<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Bienvenidos a gastobien.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet">
<style>
body {
	padding-top: 60px;
	/* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/jquery-ui.css" rel="stylesheet">

<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui.js"></script>
<script src="js/custom.js"></script>
<script type="text/javascript">
	/*$(document).ready(function(){
		$('.category-detail').each(function(){
			$(this).click(function(){
				show(this.id);				
			});
			$('#add_new').click(function() {
				
				$("#add-new-form").dialog("open");
			});
		});
		var categoryid = $('#hdnfield').val();
		if(categoryid)
		{
			show(categoryid);
		}		
	});*/

	$(document).ready(function() {
		$('#add_new').click(function() {
			$('#hdnAction').val('new');
			$("#add-new-form").dialog("open");
		});

		var categoryid = $('#hdnfield').val();
		if (categoryid) {
			show(categoryid);
		}
	});

	$(function() {
		$("#add-new-form").dialog({
			autoOpen : false,
			height : 300,
			width : 350,
			modal : true,
			buttons : {
				"Aceptar" : function() {
					AddCategoryDetail();
					$(this).dialog("close");
				},
				"Cancelar" : function() {
					$(this).dialog("close");
				}
			},
			close : function() {
				$(this).dialog("close");
			}
		});
	});

	function AddCategoryDetail() {
		var categoryId = $('#hdnfield').val();
		var target = '#detail';
		var data = 'action=new&' + $('#frmCategories').serialize()
				+ '&categoryId=' + categoryId;

		$.post("addNewCategoryDetail", data, function(rpta) {
			$(target).html(rpta);
		});
		show(categoryId);
	}

	$(function() {
		$("#tabs").tabs();
	});

	function show(id) {
		var target = '#detail';
		var data = 'categoryId=' + id;
		$(target).html("<img src='img/ajax-loader.gif'>");
		$.get("getCategoryDetailByCategoryId", data, function(rpta) {
			$(target).html(rpta);
		});
	}
</script>
</head>

<body>
	<div id="add-new-form" title="Nueva Subcategoria">
		<form id="frmCategories">
			<fieldset>
				<label for="Subcategoria">Subcategoria</label><input type="text"
					name="Subcategoria" id="Subcategoria"
					class="text ui-widget-content ui-corner-all" /> <label
					for="Descripcion">Descripcion</label> <input type="text"
					name="Descripcion" id="Descripcion" value=""
					class="text ui-widget-content ui-corner-all" />
			</fieldset>
		</form>
	</div>
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="navbar-inner">
			<div class="container">
				<button type="button" class="btn btn-navbar" data-toggle="collapse"
					data-target=".nav-collapse">
					<span class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="brand" href="home.jsp">gastobien.com</a>
				<div class="nav-collapse collapse">
					<ul class="nav">
						<li class="active"><a href="home.jsp">Inicio</a></li>
						<li><a href="about.html">Acerca de nosotros</a></li>
						<li><a href="contact.html">Contacto</a></li>
						<li><a href="profile.jsp">${sessionScope.login}</a></li>
						<li><a href="logout">Salir</a></li>
					</ul>
				</div>
				<!--/.nav-collapse -->
			</div>
		</div>
	</div>
	<div class="container">
		<div id="tabs">
			<ul>
				<c:forEach items="${sessionScope.categories}" var="r">
					<li><a href="#tabs-${r.categoryID}" class="category-detail"
						id="${r.categoryID}">${r.categoryName}</a></li>
					<c:if test="${r.indexOf == 1}">
						<input type="hidden" id="hdnfield" value="${r.categoryID}">
					</c:if>
				</c:forEach>
			</ul>
			<div id="detail"></div>
			<button id="add_new" class="btn btn-default">Agregar nueva
				subcategoria</button>
		</div>
	</div>

	<input id="hdnAction" value="" type="hidden">

	<!-- /container -->
</body>


</html>